<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="1000" height="1000" id="canvas">

    </canvas>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var color = ["red","blue","green","black","skyblue","pink","deeppink"];
        var mycolor = color[parseInt(Math.random() * color.length)]

        canvas.onmousedown = function(){
            canvas.addEventListener("mousemove", handler, true);
        }

        canvas.onmouseup = function(){
            canvas.removeEventListener("mousemove", handler, true);
        }

        function handler(e){
            ctx.beginPath();
            ctx.arc(e.pageX,e.pageY,20,0,Math.PI*2,true);
            ctx.fillStyle = mycolor;
            ctx.fill();

            socket.emit("hua",{"x":e.pageX,"y":e.pageY,"color":mycolor});
        }
        var socket = io();
        socket.on("huida",function(msg){
            ctx.beginPath();
            ctx.arc(mes.x,msg.y,20,0,Math.PI*2,true);
            ctx.fillStyle = msg.color;
            ctx.fill();
        });
    </script>
</body>
</html>